﻿function loadComments(url, index, page, loaderTarget, contentTarget) {
    $(loaderTarget).show();

    $.get(url, { index: index, page: page }, function(result) {
        processComments(url, result, index, page, loaderTarget, contentTarget);
    }, "json");
}


function processComments(url, result, index, page, loaderTarget, contentTarget) {

    $(contentTarget).empty();

    if (result.Total == 0) {

        $(contentTarget).append($("<tr/>").append($("<td/>").append("No comments yet")));
    }
    else {

        $.each(result.Comments, function(i, comment) {

            if (result.IsAuthenticated && result.UserId == comment.Author) {
                $("#layout")
                        .append($("<tr/>")
                            .css({ 'background-color': '#E5E5E5', 'vertical-align' : 'top' })
                            .append($("<td/>")
                            .css({ 'padding-left': '2px' })
                            .attr("class", "said")
                            .append($("<strong/>")
                            .append($("<a/>")
                                    .attr("href", "/Photo/NsId/" + comment.Author)
                                    .css({ 'color': 'Red', 'text-decoration': 'none' })
                                    .append(comment.AuthorName))
                                .append("&nbsp;says: "))
                            .append($("<a/>")
                                .css({ 'color': '#0063DC', 'text-decoration': 'none', 'cursor': 'hand', 'cursor': 'pointer' })
                                .click(function() {
                                    $(this).empty();
                                    $(this).append($("<i/>").append("[Deleting... Please hold your breath!!!]"));
                                    $.post("/Comment/Delete/", { commentId: comment.Id, photoId: comment.PhotoId }, function(result) {
                                        loadComments(0, 20, "#cmLoader", "#layout");
                                    });
                                })
                                .append("&nbsp;[Delete]"))
                            .append($("<br/>"))
                            .append(comment.Text)));
            }
            else {

                $("#layout")
                        .append($("<tr/>")
                            .css({ 'vertical-align': 'top' })
                            .append($("<td/>")
                            .attr("class", "said")
                            .append($("<strong/>")
                            .append($("<a/>")
                                    .attr("href", "/Photo/NsId/" + comment.Author)
                                    .css({ 'color': '#0063DC', 'text-decoration': 'none' })
                                    .append(comment.AuthorName))
                                .append("&nbsp;says: "))
                            .append($("<br/>"))
                            .append(comment.Text)));

            }

        });
    }

    loadPager(url, index, page, result.Total);
    loadAddForm(result.IsAuthenticated);

    $(loaderTarget).hide();
    
}


function loadPager(url, index, page, total) {

    var pager = $("#commentPager");
    pager.empty();

    if (total > 10) {

        if (index == 0) {
            pager.append("First&nbsp;|&nbsp;Previous&nbsp;|&nbsp;")
        }
        else {
            pager
                .append($("<a/>")
                    .css({ 'cursor': 'hand', 'cursor': 'pointer' })
                    .click(function() { loadComments(url ,0, 20, "#pageLoader", "#layout") }).append("First"))
                .append("&nbsp;|&nbsp;")
                .append($("<a/>")
                    .css({ 'cursor': 'hand', 'cursor': 'pointer' })
                    .click(function() { loadComments(url , index - 1, 20, "#pageLoader", "#layout") }).append("Previous"))
                .append("&nbsp;|&nbsp;");
        }

        var currentTotal = (index + 1) * page;
        var lastPage = Math.floor((total - 1) / page);

        if (currentTotal >= total) {
            pager.append("Next&nbsp;|&nbsp;Last&nbsp;");
        }
        else {
            pager
                .append($("<a/>")
                    .css({ 'cursor': 'hand', 'cursor': 'pointer' })
                    .click(function() { loadComments(url, index + 1, 20, "#pageLoader", "#layout") }).append("Next"))
                .append("&nbsp;|&nbsp;")
                .append($("<a/>")
                    .css({ 'cursor': 'hand', 'cursor': 'pointer' })
                    .click(function() { loadComments(url ,lastPage, 20, "#pageLoader", "#layout") }).append("Last"));
        }
        $("#commentPager").show();
    }
}

function loadAddForm(isAuthenticated) {

    $("#errComment").hide();

    if (isAuthenticated) {
        $("#btnAddComment").removeAttr("disabled");
    }
    else {
        $("#btnAddComment").attr("disabled", "disabled");
    }

    $("#btnAddComment").click(function() {

        if (jQuery.trim($("#txtComment").val()) == '') {
            $("#errComment").show();
        }
        else {
            $("#errComment").hide();
            $("#caWait").show();
            $("#txtComment").attr('disabled', 'disabled');

            $.post("/Comment/AddComment/", { photoId: getPhotoIdFromHash(), text: $("#txtComment").val() }, function(result) {
                $("#txtComment").val('');
                loadComments(0, 20, "#caWait", "#layout");
                $("#txtComment").removeAttr("disabled");
            });
        }
    });

}
